<template>
  <div>
    <template v-for="(item, index) in data" :key="index">
      <!-- 判断--item是否有children属性，
          如果有 生成 el-sub-menu
          如果没有 生成 el--menu-item
        -->
      <el-sub-menu v-if="item.children" :index="item.path">
        <template #title>
          <!-- 自定义菜单图标 -->
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <!--  -->
          <span>{{ item.meta.title }}</span>
        </template>
        <!-- 遍历children 内层遍历 -->
        <!-- -- 一个组件是可以自己调用自己(不需要引入，只需要用组件的组件名) -- 组件递归 -->
        <MyMenuItem :data="item.children"></MyMenuItem>
        <!-- 级的跳转 -->
      </el-sub-menu>
      <!-- 级的跳转 -->
      <!-- 使用跳转路由当作 index --让index唯一，点击谁 谁有选中样式 -->
      <el-menu-item v-else :index="item.path" @click="$router.push(item.path)">
        <!-- 自定义菜单图标  -->
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <!--  -->
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>
<script>
export default {
  props: ['data'],
  mounted() {
    console.log(this.data)
  },
  methods: {
    fn(v) {
      //debugger
      console.log(v.path)
      //this.$router.push({name:v.name})
      //this.$router.push({path:v.path})
      this.$router.push({ path: v.path })
      console.log(this.$router)
    }
  }
}
</script>
<style lang="css"></style>
